<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();%>
<%String contextPath = request.getContextPath();%>
<jsp:include page="inc.jsp" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<script type="text/javascript">
/* jquery入口*/
$(function() {
    loadgrid(); //加载datagrid
});
/* 加载datagrid列表*/
    function loadgrid(){
        $('#grid').datagrid({
        title : '产品类别',
        url : getCurProjPath() + '/SelectProductType',
        loadMsg : '正在加载…',  //当从远程站点载入数据时，显示的一条快捷信息。
        fit : true,  //窗口自适应
        nowrap: false, //设置为true，当数据长度超出列宽时将会自动截取
        fitColumns : true, // 自动适应列宽
        singleSelect : true, // 每次只选中一行
        sortName : 'id', //默认排序字段
        sortOrder : 'asc', // 升序asc/降序desc
        striped : true,  // 隔行变色  
        pagination : true,  // 在底部显示分页工具栏
        pageNumber : 1, //初始化页码 
        pageSize : 20,  // 指定每页的大小，服务器要加上page属性和total属性
        pageList : [ 20, 30, 50 ], // 可以设置每页记录条数的列表，服务器要加上rows属性
        //rownumbers : true, // 在最前面显示行号 
        idField : 'id', // 主键属性
        // 冻结列,当很多咧出现滚动条时该列不会动
        frozenColumns : [ [
        {title : '产品类别号', width : '100', field : 'id', sortable : true}, 
        {title : '产品类别名', width : '100', field : 'productTypeName', sortable : true}
        ] ],
        columns : [ [ 
        {title : '产品类别描述', width : '100', field : 'description', sortable : false}, 
        ] ],       
        // 工具栏按钮
        toolbar: '#tb'
    });
}
	/* 显示Dialog*/
        function openDialog(title){
            $("#dialog").dialog({
                resizable: false,
                modal: true,
                buttons: [{ //设置下方按钮数组
                    text: '保存',
                    iconCls: 'icon-save',
                    handler: function () {
                       save();
                    }
                }, {
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        closeDialog();
                    }
                }]
            });
            $("#dialog").dialog('setTitle', title);
            $("#dialog").dialog('open');
        }
	/* 关闭Dialog*/
        function closeDialog() {  
            $("#form").form('clear'); // 清空form的数据
            $("#dialog").dialog('close');// 关闭dialog
        }
	
	/* 添加数据*/
        function add() {
            openDialog('添加'); // 显示添加数据dialog窗口
            $("#form").form('clear'); // 清空form的数据
            url = getCurProjPath() + '/AddProductType'; //后台添加数据action
        }
	
	/* 修改数据*/
        function edit() {
            var row = $('#grid').datagrid('getSelected'); //// 得到选中的一行数据
            //如果没有选中记录
            if(row == null){
                $.messager.alert("提示", "请选择一条记录",'info');
                return;
            }
            openDialog('修改'); // 显示更新数据dialog窗口
            $("#form").form('load', row); // 加载选择行数据
            url = getCurProjPath() + '/UpdateProductType?id='+row.id; //后台更新数据action
        }
		
		/* 保存数据*/
        function save(){
            $('#form').form('submit',{
                url: url,  //提交地址
                onSubmit: function(){
                    return $(this).form('validate'); //前台字段格式校验
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.success){
                        closeDialog();// 调用closeDialog;    
                        reload();// 重新加载
                        $.messager.show({    //显示正确信息
                            title: '提示',
                            msg: result.msg
                        });
                    } else {              
                        $.messager.show({   //显示错误信息
                            title: '错误',
                            msg: result.msg
                        });
                    }
                }
            });
        }
        /* 删除数据*/
        $(function(){
            $('#remove').bind('click', function(){
                var row = $('#grid').datagrid('getSelected');
                //如果没有选中记录
                if(row == null){
                    $.messager.alert("提示", "请选择一条记录",'info');
                    return;
                }
                $.messager.confirm('确认', '确定要删除吗？', function (r) {
                        if (r) {
                            //提交到后台的action
                            $.post(getCurProjPath() + '/DeleteProductType', { id: row.id }, function (result) { 
                                if (result.success) {
                                    reload();
                                    $.messager.show({   //显示正确信息
                                        title: '提示',
                                        msg: result.msg
                                    });                                 
                                } else {
                                    $.messager.show({   //显示错误信息
                                        title: '错误',
                                        msg: result.msg
                                    });
                                }
                            }, 'json');
                        }
                    });
            });
        });
	/* 刷新grid*/
        function reload(){
            $('#grid').datagrid('reload');
        }
	//搜索
	function search(value,name){
			$('#grid').datagrid('load',{ key: value,type:name });
            url = getCurProjPath() + '/SelectProductType'; //后台更新数据action
		}
	
     // 获取项目的URL
    	function getCurProjPath() {
    		var curWwwPath = window.document.location.href;
    		var pathName = window.document.location.pathname;
    		var pos = curWwwPath.indexOf(pathName);
    		var localhostPath = curWwwPath.substring(0, pos);
    		var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    		return (localhostPath + projectName);
    	}
</script>
<body>
<div style="width:100%;height:100%;padding:0px;overflow:hidden">
		<table id="grid"></table>
	</div>
	<div id="dialog" class="easyui-dialog" data-options="closed:true" title="产品类别管理" style="width:350px;height:200px;text-align:center" >
              <form id="form" method="post">
                     <div>
                        <label>产品类别编号</label>
                        <input name="id" data-options="required:true" />
                 </div>
                 <div>
                        <label>产品类别名称</label>
                        <input name="productTypeName" data-options="required:true" />
                 </div>
                 <div>
                        <label>产品类别描述</label>
                        <input name="description" data-options="required:false" />
                 </div>
              </form>
       </div>
     <div id='tb'>
     	<a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="add()">添加</a>
     	<div style="height:30px; width:1px; border-left:1px #cccecd solid;display:inline"></div>
		<a class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="edit()">编辑</a>
		<div style="height:30px; width:1px; border-left:1px #cccecd solid;display:inline"></div>
		<a id="remove" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" >删除</a>
		<div style="height:30px; width:1px; border-left:1px #cccecd solid;display:inline"></div>
		<a class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="reload()">刷新</a>
		<input id="ss" class="easyui-searchbox" data-options="prompt:'请输入搜索内容',menu:'#mm',searcher:search" style="width:300px"></input>
     </div>
     <div id="mm">
		<div data-options="name:'id'">产品类别号</div>
		<div data-options="name:'productTypeName'">产品类别名</div>
	</div>
</body>
</html>